/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div>
        <div class="common-alert__wrapper"
             :class="wrapClass">
            <div class="common-alert__text">
                <slot></slot>
            </div>
        </div>
    </div>
</template>

<style lang='stylus'>
.common-alert__wrapper
    border-radius 4px
    color #fff
    padding 10px
.common-alert__wrapper--success 
    background #22B07B

.common-alert__wrapper--warning
    background #FDF3E4
    color #F90

.common-alert__wrapper--danger
    background #ee5555

.common-alert__wrapper--normal
    background #39bca3
</style>
<script lang=ts>

    /**
     * created by sch
     */

    import { Component, Vue, Prop } from 'vue-property-decorator'

    @Component
    export default class Alert extends Vue {
        @Prop({
                type: String,
                default: ''
        }) type!: 'success' | 'warn' | 'danger' | 'normal'

        get wrapClass () {
            return `common-alert__wrapper--${this.type}`;
        }
    };

</script>